<template>
  <div id="phoneVerification">
    <!--后退-->
    <img class="back" src="../../../assets/homepage/chanel.png" alt="" onclick="history.go(-1)">
    <div class="header">
        <section class="one">
            <img src="../../../assets/homepage/phone.png" alt="">
            <p>手机验证</p>
        </section>
        <img src="../../../assets/homepage/arrow.png" alt="">
        <section class="two">
            <img src="../../../assets/homepage/unpeople.png" alt="">
            <p>实名认证</p>
        </section>
         <img src="../../../assets/homepage/arrow.png" alt="">
        <section class="three">
            <img src="../../../assets/homepage/unpsw.png" alt="">
            <p>交易密码设置</p>
        </section>
    </div>

    <div class="certified">
          <p class="certifiedPOne">
            <input v-on:blur="changephNum" v-model="phoneNumber.phoneNumber" type="text" placeholder="请输入手机号">
          </p>
          <em v-show="confirmiPhone">您输入的号码有误</em>
         <p class="certifiedPTwo">
            <input v-model="phoneNumber.verifyCode" type="text" placeholder="请输入验证码" >
            <span @click="getIdenCode">获取验证码</span>
         </p>
        <p @click="next"  class="certifiedPThree">下一步</p>
    </div>

  </div>
</template>
<script>
export default {
  data () {
    return {
        confirmiPhone:false,
        active:0,
        phoneNumber:{
            phoneNumber:undefined,
            verifyCode:undefined,
        },
    }
  },
  methods:{
      changephNum(){
            // var phone = document.getElementById('phone').value;

            if(!(/^1[0-9]{10}$/.test(this.phoneNumber.phoneNumber))){
                this.confirmiPhone = true;
                // return false;
            } else{
                this.confirmiPhone = false;
            }
      },
    // 获取验证码
    getIdenCode(){

         if(!(/^1[0-9]{10}$/.test(this.phoneNumber.phoneNumber))){
               return
            } else{
                 this.$api.getIdenCode(this.phoneNumber).then((res)=>{
                    if(res.code=='000000'){
                        this.phoneNumber.verifyCode = JSON.parse(res.data).code
                    }
                })
            }
    },
    next(){
        // this.$router.push('/userVerified/'+this.phoneNumber.phoneNumber)
         this.$router.push({
            path: '/userVerified',
            name: 'userVerified',
            params: {
                name: 'userVerified',
                data: this.phoneNumber,
            }

        })
    }
  }
}
</script>
<style>
#phoneVerification{
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-image:url(../../../assets/homepage/Verified.png);
}
#phoneVerification .back{
    position:fixed;
    height:1.1rem;
    width:0.6rem;
    top:1.25rem;
    left:1.25rem;
}
#phoneVerification .header{
    height:15%;
    width:75%;
    padding:1.5rem 0px;
    margin:0px auto;
    display:flex;
    justify-content:space-between;
}
#phoneVerification .header > img{
     height:0.05rem;
     width:2.5rem;
     margin-top:0.75rem;
}
#phoneVerification .header .one{
    text-align:center;
    font-size:0.6rem;
    line-height:1.5rem;
    color:#29a193;
}
#phoneVerification .header .two{
    text-align:center;
    font-size:0.6rem;
    line-height:1.5rem;
    color:#8a8a8a;
}
#phoneVerification .header .three{
    text-align:center;
    font-size:0.6rem;
    line-height:1.5rem;
    color:#8a8a8a;
}
#phoneVerification .header > section >img {
    height:1.5rem;
    width:1.5rem;
}
#phoneVerification .certified{
    width:80%;
    padding:1.5rem 3rem;
    font-size:0.75rem;
    margin:1.5rem auto;
    background:#fff;
    box-shadow:0.1rem 0.1rem 0.5rem 0.1rem #e2e2e2;
    border-radius:13px;
}
#phoneVerification .certified em{
    font-size:0.7rem;
    color:red;
}
#phoneVerification .certified .certifiedPOne{
    line-height:1.5rem;
    border-bottom:1px solid #8a8a8a;
}
#phoneVerification .certified .certifiedPOne input{
    color:#8a8a8a;
    width:100%;
}
#phoneVerification .certified .certifiedPTwo{
    line-height:1.5rem;
    border-bottom:1px solid #8a8a8a;
    margin-top:1rem;
    display:flex;
}
#phoneVerification .certified .certifiedPTwo input{
    color:#8a8a8a;
    width:70%;
}
#phoneVerification .certified .certifiedPTwo span{
    width:70%;
    text-align:right;
    font-size:0.6rem;
    color:#29a193;
}
#phoneVerification .certified .certifiedPThree{
    width:50%;
    margin:0px auto;
    background:#29a193;
    text-align:center;
    margin-top:2.5rem;
    color:#fff;
    height:2rem;
    line-height:2rem;
    border-radius:8px;
}

</style>
